<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .card {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .btn {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        pre {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
        }
        .success {
            color: green;
        }
        .error {
            color: red;
        }
        .warning {
            color: orange;
        }
    </style>
</head>
<body>
    <h1>API测试页面</h1>
    
    <div class="card">
        <h2>组织列表 API</h2>
        <button id="testOrgBtn" class="btn">测试组织列表API</button>
        <div id="orgResult">
            <p>点击按钮测试API</p>
        </div>
    </div>
    
    <div class="card">
        <h2>数据库连接测试 API</h2>
        <button id="testDbBtn" class="btn">测试数据库连接</button>
        <div id="dbResult">
            <p>点击按钮测试API</p>
        </div>
    </div>
    
    <div class="card">
        <h2>组织总人数对比</h2>
        <button id="compareOrgTotalBtn" class="btn">获取所有组织总人数对比</button>
        <div id="compareResult">
            <p>点击按钮测试API</p>
        </div>
    </div>
    
    <div class="card">
        <h2>API完整数据</h2>
        <div style="margin-bottom: 10px;">
            <label for="orgIdSelect">选择组织:</label>
            <select id="orgIdSelect" style="padding: 5px; margin-right: 10px;"></select>
            <button id="getFullApiDataBtn" class="btn">获取API完整数据</button>
        </div>
        <div id="fullApiDataResult">
            <p>选择组织并点击按钮获取数据</p>
        </div>
    </div>
    
    <script>
        // 格式化JSON
        function formatJSON(json) {
            return JSON.stringify(json, null, 2);
        }
        
        // 显示API结果
        function showResult(elementId, data, isError = false) {
            const element = document.getElementById(elementId);
            element.innerHTML = '';
            
            const statusEl = document.createElement('p');
            statusEl.textContent = isError ? '请求失败' : '请求成功';
            statusEl.className = isError ? 'error' : 'success';
            element.appendChild(statusEl);
            
            const pre = document.createElement('pre');
            pre.textContent = formatJSON(data);
            element.appendChild(pre);
        }
        
        // 测试组织列表API
        document.getElementById('testOrgBtn').addEventListener('click', function() {
            const orgResult = document.getElementById('orgResult');
            orgResult.innerHTML = '<p>正在请求数据...</p>';
            
            fetch('/api/organizations')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    showResult('orgResult', data);
                })
                .catch(error => {
                    showResult('orgResult', {error: error.message}, true);
                });
        });
        
        // 测试数据库连接API
        document.getElementById('testDbBtn').addEventListener('click', function() {
            const dbResult = document.getElementById('dbResult');
            dbResult.innerHTML = '<p>正在测试数据库连接...</p>';
            
            fetch('/api/test-db')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    showResult('dbResult', data);
                })
                .catch(error => {
                    showResult('dbResult', {error: error.message}, true);
                });
        });
        
        // 测试组织总人数对比API
        document.getElementById('compareOrgTotalBtn').addEventListener('click', function() {
            const compareResult = document.getElementById('compareResult');
            compareResult.innerHTML = '<p>正在获取对比数据...</p>';
            
            fetch('/api/comparison/all-orgs-total')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (!data.success) {
                        throw new Error(data.error || '获取数据失败');
                    }
                    
                    // 创建结果表格
                    let html = '<h3>对比结果</h3>';
                    html += `<p>匹配率: <strong>${data.data.match_rate}%</strong> (${data.data.matched_count}/${data.data.total_count})</p>`;
                    
                    html += '<table border="1" style="width:100%; border-collapse: collapse;">';
                    html += '<tr><th>组织ID</th><th>组织名称</th><th>API总人数</th><th>数据库总人数</th><th>差异</th><th>是否匹配</th></tr>';
                    
                    data.data.comparison_results.forEach(result => {
                        const matchClass = result.matched ? 'success' : 'error';
                        html += `<tr class="${matchClass}">`;
                        html += `<td>${result.belong_id}</td>`;
                        html += `<td>${result.org_name}</td>`;
                        html += `<td>${result.api_total}</td>`;
                        html += `<td>${result.db_total}</td>`;
                        html += `<td>${result.difference}</td>`;
                        html += `<td>${result.matched ? '✓' : '✗'}</td>`;
                        html += '</tr>';
                    });
                    
                    html += '</table>';
                    compareResult.innerHTML = html;
                })
                .catch(error => {
                    showResult('compareResult', {error: error.message}, true);
                });
        });
        
        // 加载组织列表到下拉菜单
        function loadOrganizationsToDropdown() {
            fetch('/api/organizations')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    const select = document.getElementById('orgIdSelect');
                    select.innerHTML = ''; // 清空下拉菜单
                    
                    data.forEach(org => {
                        const option = document.createElement('option');
                        option.value = org.belongId;
                        option.textContent = `${org.name} (ID: ${org.belongId})`;
                        select.appendChild(option);
                    });
                })
                .catch(error => {
                    console.error('加载组织列表失败:', error);
                    const select = document.getElementById('orgIdSelect');
                    select.innerHTML = '<option value="1">默认组织 (ID: 1)</option>';
                });
        }
        
        // 页面加载时加载组织列表
        document.addEventListener('DOMContentLoaded', loadOrganizationsToDropdown);
        
        // 获取API完整数据
        document.getElementById('getFullApiDataBtn').addEventListener('click', function() {
            const orgId = document.getElementById('orgIdSelect').value;
            const resultElement = document.getElementById('fullApiDataResult');
            resultElement.innerHTML = '<p>正在获取API数据...</p>';
            
            fetch(`/api/full-api-data?org_id=${orgId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (!data.success) {
                        throw new Error(data.error || '获取数据失败');
                    }
                    
                    // 创建结果显示
                    let html = `<h3>${data.data.org_name} (ID: ${data.data.belong_id}) API数据</h3>`;
                    html += '<div style="margin-top: 10px;">';
                    html += '<pre style="max-height: 500px; overflow-y: auto;">';
                    html += formatJSON(data.data.api_data);
                    html += '</pre>';
                    html += '</div>';
                    
                    resultElement.innerHTML = html;
                })
                .catch(error => {
                    showResult('fullApiDataResult', {error: error.message}, true);
                });
        });
    </script>
</body>
</html> 